<template>
	<!-- 轮播图 -->
	<container
		class="home"
		:isNoData="isNodata"
		:isLoading="loading"
		@btnClick="init"
		:nodataOption="{
			type: 'hasbtn',
			iconBottom: '40rpx',
			text: '无数据',
			btnText: '刷新'
		}"
	>
		<view class="head-tools-fixed">
			<navigator :url="'/pages/goods/goods-search'"><search :readonly="true"></search></navigator>
		</view>
		<mescroll-body
			ref="mescrollRef"
			@init="mescrollInit"
			:down="{
				auto: false,
				bgColor: '#fff'
			}"
			:up="{
				auto: false,
				use: false
			}"
			@down="downLoad"
		>
			<container
				class="banner"
				:isNoData="isBannerNodata"
				:isFixed="false"
				:nodataOption="{
					iconW: '50%',
					iconH: '37vw'
				}"
			>
				<swiper indicator-dots circular autoplay interval="2500">
					<swiper-item class="banner-item" v-for="(item, index) in bannerList" :key="item.bannerId">
						<navigator class="content" :url="'/pages/goods/good-detail?id=' + item.commodityId + '&name=' + item.commodityName">
							<image :src="imgHost + item.bannerPic"></image>
						</navigator>
					</swiper-item>
				</swiper>
			</container>
			<!-- 导航栏 -->
			<container
				:isNoData="isTypeListNodata"
				:isFixed="false"
				:nodataOption="{
					iconW: '40%',
					iconH: '30vw'
				}"
			>
				<swiper indicator-dots :autoplay="false" class="type-swiper">
					<swiper-item class="type-swiper-item" v-for="(item, index) in typeSwiperList" :key="index">
						<view class="type-nav">
							<view class="type-nav-item" v-for="(childItem, childIndex) in item">
								<navigator
									v-if="!childItem.url"
									:key="childItem.categoryId"
									:url="'/pages/goods/goods-type-list?id=' + childItem.categoryId + '&type=category' + '&name=' + childItem.categoryName"
								>
									<icon-text
										:name-size="30"
										:icon-type="'img'"
										:name="childItem.categoryName"
										:icon-nol="imgHost + childItem.categoryLogo"
										:icon-size="70"
										:icon-margin-bottom="35"
									></icon-text>
								</navigator>

								<navigator v-if="childItem.url" :key="childItem.categoryId" :url="childItem.url">
									<icon-text
										:name-size="28"
										:icon-type="'img'"
										:name="childItem.categoryName"
										:icon-nol="childItem.categoryLogo"
										:icon-size="80"
										:icon-margin-bottom="35"
									></icon-text>
								</navigator>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</container>
			<!-- 推荐列表 -->
			<container
				:isNoData="isCardListNodata"
				:isFixed="false"
				:nodataOption="{
					iconW: '60%',
					iconH: '43vw'
				}"
			>
				<view class="recommend-list">
					<goodRecommendCard
						class="item"
						v-for="(item, index) in cardList"
						:key="item.columnId"
						:name="item.title"
						:intro="item.subtitle"
						:router-link="'/pages/goods/goods-type-list?id=' + item.columnId + '&type=column' + '&name=' + item.title"
						:good-list="item.jpCommodityVOList"
					></goodRecommendCard>
				</view>
			</container>
		</mescroll-body>
	</container>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import iconText from '@/components/icon-text/icon-text.vue';
import goodsItem from '@/components/goods-item/goods-item.vue';
import goodRecommendCard from '@/components/good-recommend-card/good-recommend-card.vue';
import search from '@/components/search/search.vue';
import container from '@/components/container/container.vue';

export default {
	mixins: [MescrollMixin],
	data() {
		return {
			loading: false,
			imgHost: this.$imgHost,
			bannerList: [
				//广告列表
				// {
				// 	bannerId: 6
				// 	bannerPic: "http://121.4.40.96:8080/profile/upload/6f6dcfb4-a48f-407d-b943-23c423238dde.jpg"
				// 	commodityId: 6
				// 	commodityName: "十万个为什么2"
				// 	createTime: "2021-01-05 10:10:06"
				// 	orderNum: 134
				// 	status: 1
				// 	url: null
				// }
			],
			typeList: [
				// {
				// 	categoryId: 17
				// 	categoryLogo: "http://121.4.40.96:8080/profile/upload/b24ac63c-5875-4ea2-96d2-5bbd6788476d.jpeg"
				// 	categoryName: "科普图书"
				// 	createBy: "admin"
				// 	createTime: "2020-12-22 08:56:20"
				// 	orderNum: 231
				// 	params: {}
				// 	remark: ""
				// 	searchValue: null
				// 	status: 1
				// 	updateBy: "admin"
				// 	updateTime: "2020-12-23 02:53:59"
				// }
			],
			defaultTypeList: [
				{
					categoryId: '下载专区',
					categoryLogo: '/static/xiazai.png',
					categoryName: '下载专区',
					createBy: 'admin',
					url: '/pages/download/download'
					// 	createTime: "2020-12-22 08:56:20"
					// 	orderNum: 231
					// 	params: {}
					// 	remark: ""
					// 	searchValue: null
					// 	status: 1
					// 	updateBy: "admin"
					// 	updateTime: "2020-12-23 02:53:59"
				},
				{
					categoryId: '全部',
					categoryLogo: '/static/quanbu.png',
					categoryName: '全部',
					createBy: 'admin',
					url: '/pages/goods/goods-type-list?type=category&name=全部'
				}
			],
			cardList: [
				// 卡片列表
				// {
				// 	columnId: 4
				// 	createBy: "admin"
				// 	createTime: "2021-01-04 08:06:12"
				// 	jpCommodityVOList:[
				// 		{
				// 			categoryId: 17
				// 			categoryName: "科普图书"
				// 			columnId: 4
				// 			commodityId: 4
				// 			commodityName: "十万个为什么"
				// 			commodityPic: "http://121.4.40.96:8080/profile/upload/d1ae1dfd-ed32-4c30-8d51-ed50e2f502fa.jpg"
				// 			createTime: "2020-12-23 07:57:42"
				// 			marketPrice: 333
				// 			sellPrice: 333
				// 			status: 1
				// 			stock: 333
				// 		}
				// 	],
				// 	orderNum: 13
				// 	params: Object
				// 	remark: ""
				// 	searchValue: null
				// 	status: 1
				// 	style: 1
				// 	subtitle: "好书推荐1"
				// 	title: "好书推荐"
				// 	updateBy: "admin"
				// 	updateTime: "2021-01-05 02:22:18"
				// }
			],
			loadMoreText: '加载中...',
			showLoadMore: false
		};
	},

	components: {
		iconText,
		goodRecommendCard,
		goodsItem,
		search,
		container
	},
	computed: {
		isNodata() {
			return this.bannerList.length < 1 && this.typeList.length < 1 && this.cardList.length < 1;
		},
		isBannerNodata() {
			return this.bannerList.length < 1;
		},
		isTypeListNodata() {
			return this.typeList.length < 1;
		},
		isCardListNodata() {
			return this.cardList.length < 1;
		},
		typeSwiperList() {
			// 类型 swiper分组数组
			if (this.typeList.length > 0) return this.$Lodash.chunk(this.typeList, 8);
			else return [];
		}
	},
	onLoad() {
		console.log('加载');
		this.init();
		console.log('应用初始化');
	},
	// onUnload() {
	// 	// this.loadMoreText = '加载更多';
	// 	// this.showLoadMore = false;
	// 	console.log('loadMoreText');
	// },
	// onReachBottom() {
	// 	console.log('onReachBottom');
	// 	// if (this.data.length > 20) {
	// 	// 	this.loadMoreText = '没有更多数据了!';
	// 	// 	return;
	// 	// }
	// 	// this.showLoadMore = true;
	// },
	// onPullDownRefresh() {
	// 	console.log('onPullDownRefresh');
	// 	this.init();
	// },
	methods: {
		init() {
			this.loading = true;
			let works = [];
			works.push(this.getBannerList());
			works.push(this.getGoodTypeList());
			works.push(this.getGoodCardList());
			Promise.all(works)
				.then(res => {
					this.loading = false;
				})
				.catch(err => {
					this.loading = false;
				});
		},
		downLoad() {
			console.log('onPullDownRefresh');
			let works = [];
			works.push(this.getBannerList());
			works.push(this.getGoodTypeList());
			works.push(this.getGoodCardList());
			Promise.all(works)
				.then(res => {
					this.mescroll.endSuccess();
				})
				.catch(err => {
					this.mescroll.endErr();
				});
		},
		getBannerList() {
			// 获取轮播图列表
			return this.$store.dispatch('getBannerList').then(res => {
				console.log('轮播图列表', res);
				let data = res.data.data;
				this.bannerList = data;
			});
		},
		getGoodTypeList() {
			// 获取商品分类列表
			return this.$store.dispatch('getGoodType').then(res => {
				console.log('商品类型列表', res);
				let data = res.data.rows;
				if (data && data.length > 0) this.typeList = [...data, ...this.defaultTypeList];
				else this.typeList = [];
			});
		},
		getGoodCardList() {
			// 获取商品卡片列表
			return this.$store.dispatch('getGoodCardList').then(res => {
				console.log('商品卡片列表', res);
				let data = res.data.data;
				this.cardList = data;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.home {
	position: relative;
	// padding-top: 112rpx;
	.head-tools-fixed {
		background-color: #fff;
		position: fixed;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		/* #ifdef MP */
		top: 0px;
		/* #endif */
		width: 100%;
		box-sizing: border-box;
		padding: 22rpx 20rpx;
		z-index: 888;
	}
	.banner {
		// width: 750rpx;
		margin-top: 112rpx;
		width: 100%;
		height: 300rpx;
		display: block;
		swiper {
			width: 100%;
			height: 100%;
		}
		.banner-item {
			.content {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 300rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.type-swiper {
		height: 486rpx;
		background-color: #fff;
		.type-swiper-item {
		}
	}

	.type-nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		padding: 10rpx;
		background-color: #fff;
		.type-nav-item {
			width: 25%;
			text-align: center;
			box-sizing: border-box;
			margin-top: 35rpx;
		}
	}

	.recommend-list {
		width: 100%;
		box-sizing: border-box;
		// background-color: #eee;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 20rpx;
		.item {
			background-color: #fff;
			margin-bottom: 20rpx;
			width: 100%;
			border-radius: 8px;
			overflow: hidden;
		}
	}
}
</style>
